<template>
  <view class="flex-col page">
    <view class="flex-col section space-y-30">

      <!-- 搜索栏 -->
      <view class="search-container">
        <view class="search-box" @click="showSearchModal = true">
          <uni-icons type="search" size="20" color="#999"></uni-icons>
          <text class="search-placeholder">搜索设备、教程、商品...</text>
        </view>
        <view class="scan-btn" @click="scanCode">
          <uni-icons type="scan" size="24" color="#44cdbd"></uni-icons>
        </view>
      </view>

      <!-- 天气模块 -->
      <view class="weather-container">
        <view class="weather-info">
          <view class="weather-main">
            <text class="temperature">{{ weather.temperature }}°</text>
            <view class="weather-details">
              <text class="weather-desc">{{ weather.description }}</text>
              <text class="air-quality">湿度：{{ weather.humidity }}%</text>
            </view>
          </view>
          <view class="weather-icon">
            <!-- 修改为多云图标 -->
            <image class="weather-image" src="../../static/images/cloudy.png" mode="widthFix" />
          </view>
        </view>
        <view class="location">
          <uni-icons type="location" size="14" color="#666"></uni-icons>
          <text class="location-text">{{ weather.location }}</text>
        </view>
      </view>

      <!-- 咨询动态模块 -->
      <view class="news-section">
        <view class="section-header">
          <text class="section-title">咨询动态</text>
        </view>

        <view class="news-grid">
          <!-- 左侧大图新闻（修改图片为指定路径） -->
          <view class="news-main" @click="handleNewsClick(mainNews)">
            <!-- 替换原mainNews.image为指定图片路径 -->
            <image class="main-news-image" src="../../static/images/IMG_5065.jpg" />
            <view class="news-overlay">
              <text class="main-news-title">{{ mainNews.title }}</text>
              <text class="main-news-time">{{ mainNews.time }}</text>
            </view>
          </view>

          <!-- 右侧新闻列表 -->
          <view class="news-list">
            <view class="news-item" v-for="(item, index) in newsList" :key="index"
                  @click="handleNewsClick(item)">
              <image class="news-item-image" :src="item.image" />
              <view class="news-item-content">
                <text class="news-item-title">{{ item.title }}</text>
                <view class="news-meta">
                  <uni-icons type="eye" size="12" color="#999"></uni-icons>
                  <text class="meta-text">{{ item.views }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 实验室状态概览 -->
      <view class="lab-overview">
        <text class="section-title">实验室概览</text>
        <view class="overview-cards">
          <!-- 设备总数 -->
          <view class="overview-card">
            <view class="flip-number-container">
              <view class="flip-number" v-for="(digit, index) in getDigits(labStats.totalDevices)"
                    :key="'total-' + index"
                    :class="{ 'animating': animatingStates.totalDevices }">
                <view class="digit-wrapper">
                  <text class="digit current">{{ digit }}</text>
                  <text class="digit next">{{ digit }}</text>
                </view>
              </view>
            </view>
            <text class="overview-label">设备总数</text>
          </view>

          <!-- 在线设备 -->
          <view class="overview-card">
            <view class="flip-number-container">
              <view class="flip-number" v-for="(digit, index) in getDigits(labStats.onlineDevices)"
                    :key="'online-' + index"
                    :class="{ 'animating': animatingStates.onlineDevices }">
                <view class="digit-wrapper">
                  <text class="digit current">{{ digit }}</text>
                  <text class="digit next">{{ digit }}</text>
                </view>
              </view>
            </view>
            <text class="overview-label">在线设备</text>
          </view>

          <!-- 活跃用户 -->
          <view class="overview-card">
            <view class="flip-number-container">
              <view class="flip-number" v-for="(digit, index) in getDigits(labStats.activeUsers)"
                    :key="'active-' + index"
                    :class="{ 'animating': animatingStates.activeUsers }">
                <view class="digit-wrapper">
                  <text class="digit current">{{ digit }}</text>
                  <text class="digit next">{{ digit }}</text>
                </view>
              </view>
            </view>
            <text class="overview-label">活跃用户</text>
          </view>
        </view>
      </view>

      <!-- 优化的内容区域 -->
      <view class="flex-col group_2 space-y-17">
        <!-- 产品百科 - 支持多条目展示 -->
        <view class="flex-col encyclopedia-section">
          <view class="flex-row justify-between items-center group_3">
            <text class="font_2">产品百科</text>
            <view class="flex-row items-center group_4" @click="navTo1('/pages/proencyclopedia/proencyclopedia')">
              <image class="image_3" src="../../static/images/898813d7e50a705ce175c61572c68d77.png" />
              <text class="font_3 text_2">全部</text>
            </view>
          </view>

          <!-- 可滚动的百科列表 -->
          <scroll-view scroll-x="true" class="encyclopedia-scroll">
            <view class="encyclopedia-item" v-for="(item, index) in encyclopediaList" :key="index"
                  @click="viewEncyclopedia(item)">
              <image class="encyclopedia-image" :src="item.image" />
              <view class="encyclopedia-content">
                <text class="encyclopedia-title">{{ item.title }}</text>
                <text class="encyclopedia-subtitle">{{ item.subtitle }}</text>
                <view class="encyclopedia-meta">
                  <uni-icons type="eye" size="12" color="#999"></uni-icons>
                  <text class="meta-text">{{ item.views }}次查看</text>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>

<!--        &lt;!&ndash; 新品推荐 - 增强交互 &ndash;&gt;-->
<!--        <view class="new-products-section">-->
<!--          <view class="flex-row justify-between items-center group_6">-->
<!--            <text class="font_2">新品推荐</text>-->
<!--            <view class="flex-row items-center group_4" @click="navTo1('/pages/allnewequip/allnewequip')">-->
<!--              <image class="image_3" src="../../static/images/898813d7e50a705ce175c61572c68d77.png" />-->
<!--              <text class="font_3 text_2">全部</text>-->
<!--            </view>-->
<!--          </view>-->

<!--          <view class="flex-row justify-between swiper-wrapper">-->
<!--            <swiper class="swiper" :indicator-dots="false" :autoplay="false">-->
<!--              <swiper-item v-for="(item, index) in shop" :key="index" @click="clickItem(item)">-->
<!--                <view class="flex-col self-start section_33 space-y-144 item-container">-->
<!--                  <image class="image_133" src="@/static/images/51276e00a4890f11936fcc00b81e6367.png" />-->
<!--                  <text class="font_11">{{ item.name_commodity }}</text>-->
<!--                  <text class="font_12">{{ item.description_commodity }}</text>-->
<!--                  <text class="font_13">{{ dateFormat(item.time_commodity)+'发布'}}</text>-->

<!--                  &lt;!&ndash; 新增的交互按钮 &ndash;&gt;-->
<!--                  <view class="item-actions">-->
<!--                    <view class="action-btn" @click.stop="toggleFavorite(item)">-->
<!--                      <uni-icons :type="item.isFavorite ? 'heart-filled' : 'heart'"-->
<!--                                 :color="item.isFavorite ? '#ff6b6b' : '#ccc'" size="16"></uni-icons>-->
<!--                    </view>-->
<!--                    <view class="action-btn" @click.stop="shareItem(item)">-->
<!--                      <uni-icons type="redo" color="#44cdbd" size="16"></uni-icons>-->
<!--                    </view>-->
<!--                  </view>-->
<!--                </view>-->
<!--              </swiper-item>-->
<!--            </swiper>-->
<!--          </view>-->
<!--        </view>-->
      </view>
    </view>

    <!-- 搜索模态框 -->
    <uni-popup ref="searchPopup" type="top" :mask-click="false" v-model="showSearchModal">
      <view class="search-modal">
        <view class="search-header">
          <view class="search-input-container">
            <uni-icons type="search" size="20" color="#999"></uni-icons>
            <input class="search-input" placeholder="搜索设备、教程、商品..."
                   v-model="searchKeyword" @input="onSearchInput" auto-focus />
            <view class="cancel-btn" @click="closeSearch">取消</view>
          </view>
        </view>

        <view class="search-content" v-if="!searchKeyword">
          <view class="search-section">
            <text class="search-section-title">热门搜索</text>
            <view class="hot-keywords">
              <text class="keyword-tag" v-for="keyword in hotKeywords" :key="keyword"
                    @click="searchKeyword = keyword">{{ keyword }}</text>
            </view>
          </view>

          <view class="search-section" v-if="searchHistory.length > 0">
            <view class="search-section-header">
              <text class="search-section-title">搜索历史</text>
              <text class="clear-history" @click="clearHistory">清除</text>
            </view>
            <view class="history-list">
              <view class="history-item" v-for="item in searchHistory" :key="item"
                    @click="searchKeyword = item">
                <uni-icons type="clock" size="16" color="#999"></uni-icons>
                <text class="history-text">{{ item }}</text>
              </view>
            </view>
          </view>
        </view>

        <view class="search-results" v-if="searchKeyword && searchResults.length > 0">
          <view class="result-item" v-for="result in searchResults" :key="result.id"
                @click="selectSearchResult(result)">
            <image class="result-image" :src="result.image" />
            <view class="result-content">
              <text class="result-title">{{ result.title }}</text>
              <text class="result-desc">{{ result.description }}</text>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { _allshopequip } from '@/service/shop.js'
import UniBadge from "@/uni_modules/uni-badge/components/uni-badge/uni-badge.vue";
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";

export default {
  components: {
    UniBadge,
    UniIcons,
    UniPopup
  },
  data() {
    return {
      // shop: [],
      pressedItem: -1, // 虽未使用但保留避免报错
      smartLabCount: 3, // 虽未使用但保留避免报错
      trendsCount: 8, // 虽未使用但保留避免报错
      hasNewUpdate: true, // 虽未使用但保留避免报错
      showSearchModal: false,
      searchKeyword: '',
      searchResults: [],
      searchHistory: ['箱式电阻炉', '温控设备', '实验室管理'],
      hotKeywords: ['智能控制', '温度传感器', '数据采集', '远程监控', '自动化设备'],

      // 天气数据
      weather: {
        temperature: 18,
        description: '多云',
        humidity: 64,
        location: '南京市',
        icon: '../../static/images/weather-cloud.png'
      },

      // 实验室统计数据
      labStats: {
        totalDevices: 348,
        onlineDevices: 142,
        activeUsers: 28
      },

      // 百科列表数据
      encyclopediaList: [
        {
          id: 1,
          title: '箱式电阻炉使用说明',
          subtitle: '箱式电阻炉二号',
          image: '../../static/images/eb97297bdebb07d62b87dbd68a1d7edb.png',
          views: 1256
        },
        {
          id: 2,
          title: '温控仪操作指南',
          subtitle: '智能温控系统',
          image: '../../static/images/eb97297bdebb07d62b87dbd68a1d7edb.png',
          views: 982
        },
        {
          id: 3,
          title: '数据采集器配置',
          subtitle: '多通道采集设备',
          image: '../../static/images/eb97297bdebb07d62b87dbd68a1d7edb.png',
          views: 743
        }
      ],

      // 主要新闻数据
      mainNews: {
        id: 1,
        title: '安徽技术标准】年度编制进度落实专项整治活动',
        time: '1分钟',
        image: '../../static/images/news-main.jpg'
      },

      // 新闻列表数据
      newsList: [
        {
          id: 2,
          title: '数字助听器解决方案：C&K与CADDC',
          views: '337',
          image: '../../static/images/news-1.jpg'
        },
        {
          id: 3,
          title: '智能设备管理系统升级',
          views: '245',
          image: '../../static/images/news-2.jpg'
        },
        {
          id: 4,
          title: '实验室安全管理规范',
          views: '189',
          image: '../../static/images/news-3.jpg'
        }
      ],

      // 动画状态
      animatingStates: {
        totalDevices: false,
        onlineDevices: false,
        activeUsers: false
      },

      // 之前的数值，用于动画
      previousStats: {
        totalDevices: 348,
        onlineDevices: 142,
        activeUsers: 28
      }
    };
  },
  created() {
    document.documentElement.style.setProperty('--global-gradient', 'linear-gradient(180deg, #44cdbd 0%, #fff 100%)');
  },
  onShow() {
    this.getallshops();
    this.loadLabStats();
    this.startStatsUpdater();
  },
  methods: {
    navTo(url) {
      uni.switchTab({ url: url })
    },
    navTo1(url) {
      uni.navigateTo({
        url: url,
        success(res) { console.log('成功啦', res); },
        fail(res) { console.log('失败啦', res); }
      })
    },
    // async getallshops() {
    //   let res = await _allshopequip()
    //   this.shop = res.data.map(item => ({
    //     ...item,
    //     isFavorite: false
    //   }))
    // },
    // dateFormat(registertime) {
    //   let date = new Date(registertime);
    //   let year = date.getFullYear();
    //   let month = date.getMonth() + 1;
    //   let day = date.getDate();
    //   return year + "-" + month + "-" + day;
    // },
    // clickItem(data) {
    //   uni.setStorage({
    //     data: data,
    //     key: 'shopxiangqing'
    //   })
    //   this.navTo1('/pages/shopxiangqing/shopxiangqing')
    // },

    // 以下方法虽与删除的模块相关，但保留避免报错（可根据需要手动删除）
    handleTouchStart(index) {
      this.pressedItem = index;
      uni.vibrateShort();
    },
    handleTouchEnd(index) {
      setTimeout(() => {
        this.pressedItem = -1;
      }, 150);
    },
    handleItemClick(type) {
      switch(type) {
        case 'smart':
          this.navTo1('/pages/smartlab/smartlab');
          break;
        case 'update':
          this.navTo1('/pages/updates/updates');
          break;
      }
    },

    onSearchInput() {
      if (this.searchKeyword.trim()) {
        this.performSearch();
      } else {
        this.searchResults = [];
      }
    },
    performSearch() {
      this.searchResults = [
        {
          id: 1,
          title: `${this.searchKeyword}相关设备`,
          description: '智能控制系统',
          image: '../../static/images/51276e00a4890f11936fcc00b81e6367.png'
        }
      ];
    },
    closeSearch() {
      this.showSearchModal = false;
      this.searchKeyword = '';
      this.searchResults = [];
    },
    clearHistory() {
      this.searchHistory = [];
      uni.showToast({ title: '历史记录已清除', icon: 'success' });
    },
    selectSearchResult(result) {
      this.closeSearch();
    },

    handleNewsClick(news) {
      uni.navigateTo({
        url: `/pages/news/detail?id=${news.id}`
      });
    },

    scanCode() {
      uni.scanCode({
        success: (res) => {
          console.log('扫码结果：', res);
          uni.showToast({ title: '扫码成功', icon: 'success' });
        },
        fail: (err) => {
          console.log('扫码失败：', err);
        }
      });
    },

    // toggleFavorite(item) {
    //   item.isFavorite = !item.isFavorite;
    //   uni.showToast({
    //     title: item.isFavorite ? '已收藏' : '已取消收藏',
    //     icon: 'success'
    //   });
    // },
    //
    // shareItem(item) {
    //   uni.share({
    //     provider: "weixin",
    //     scene: "WXSceneSession",
    //     type: 0,
    //     href: "https://example.com",
    //     title: item.name_commodity,
    //     summary: item.description_commodity,
    //     success: () => {
    //       uni.showToast({ title: '分享成功', icon: 'success' });
    //     }
    //   });
    // },

    viewEncyclopedia(item) {
      this.navTo1(`/pages/encyclopedia/detail?id=${item.id}`);
    },

    loadLabStats() {
      setTimeout(() => {
        this.labStats = {
          totalDevices: 348,
          onlineDevices: Math.min(Math.floor(Math.random() * 200) + 100, 348),
          activeUsers: Math.floor(Math.random() * 50) + 20
        };
      }, 1000);
    },

    getDigits(number) {
      return number.toString().split('');
    },

    updateLabStats() {
      const keys = ['totalDevices', 'onlineDevices', 'activeUsers'];

      keys.forEach(key => {
        if (key === 'totalDevices') {
          return;
        }

        this.previousStats[key] = this.labStats[key];
        const change = Math.floor(Math.random() * 21) - 10;
        let newValue = this.labStats[key] + change;

        if (key === 'onlineDevices' || key === 'activeUsers') {
          newValue = Math.max(0, newValue);
        }

        if (key === 'onlineDevices') {
          newValue = Math.min(newValue, this.labStats.totalDevices);
        }

        if (newValue !== this.labStats[key]) {
          this.animatingStates[key] = true;

          setTimeout(() => {
            this.labStats[key] = newValue;
          }, 150);

          setTimeout(() => {
            this.animatingStates[key] = false;
          }, 600);
        }
      });
    },

    startStatsUpdater() {
      setInterval(() => {
        this.updateLabStats();
      }, 8000);
    }
  },
};
</script>

<style scoped lang="css">
/* 页面主体 - 白色背景 */
.page {
  background: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 40rpx 20rpx 40rpx;
  overflow-y: auto;
  overflow-x: hidden;
  transition: all 0.3s ease;
}

/* 统一间隔 30rpx */
.space-y-30 > view:not(:first-child),
.space-y-30 > text:not(:first-child),
.space-y-30 > image:not(:first-child) {
  margin-top: 30rpx;
}

/* 搜索栏模块 */
.search-container {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 15rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 30rpx;
  padding: 12rpx 20rpx;
}

.search-placeholder {
  margin-left: 10rpx;
  color: #999;
  font-size: 26rpx;
}

.scan-btn {
  margin-left: 20rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 天气模块样式 - 改为白色背景 */
.weather-container {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
}

.weather-info {
  display: flex;
  justify-content: flex-start;
  gap: 85rpx;
  align-items: center;
  margin-bottom: 16rpx;
}

.weather-main {
  display: flex;
  align-items: center;
}

.temperature {
  font-size: 72rpx;
  font-weight: bold;
  color: #333;
  margin-right: 24rpx;
}

.weather-details {
  display: flex;
  flex-direction: column;
}

.weather-desc {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.air-quality {
  font-size: 24rpx;
  color: #666;
}

.weather-icon {
  width: 240rpx;
  height: 240rpx;
  animation: swing 3s ease-in-out infinite alternate;
  transform-origin: center;
}

.weather-image {
  width: 100%;
  height: 100%;
}

.location {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}

.location-text {
  margin-left: 8rpx;
}

/* 咨询动态模块 */
.news-section {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
}

.section-header {
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.news-grid {
  display: flex;
  gap: 20rpx;
}

.news-main {
  flex: 1;
  height: 300rpx;
  border-radius: 16rpx;
  overflow: hidden;
  position: relative;
}

.main-news-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 20rpx;
  color: white;
}

.main-news-title {
  font-size: 28rpx;
  font-weight: bold;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.main-news-time {
  font-size: 22rpx;
  margin-top: 10rpx;
  opacity: 0.8;
}

.news-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.news-item {
  display: flex;
  gap: 15rpx;
  height: 95rpx;
}

.news-item-image {
  width: 120rpx;
  height: 100%;
  border-radius: 10rpx;
  object-fit: cover;
}

.news-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-item-title {
  font-size: 26rpx;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-meta {
  display: flex;
  align-items: center;
  font-size: 20rpx;
  color: #999;
}

.meta-text {
  margin-left: 5rpx;
}

/* 实验室概览模块 */
.lab-overview {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
}

.overview-cards {
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
}

.overview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flip-number-container {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.overview-label {
  font-size: 26rpx;
  color: #666;
}

/* 数字翻转动画 */
.flip-number {
  position: relative;
  width: 32rpx;
  height: 60rpx;
  margin: 0 2rpx;
  overflow: hidden;
}

.digit-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.digit {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  font-weight: bold;
  color: #44cdbd;
  line-height: 1;
}

.digit.current { top: 0; }
.digit.next { top: 100%; }

.flip-number.animating .digit-wrapper {
  animation: flipUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 产品百科模块 */
.encyclopedia-section {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
}

.group_3 {
  padding-bottom: 20rpx;
}

.font_2 {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.group_4 {
  display: flex;
  align-items: center;
}

.image_3 {
  width: 24rpx;
  height: 24rpx;
  margin-right: 8rpx;
}

.font_3 {
  font-size: 26rpx;
}

.text_2 {
  color: #666;
}

.encyclopedia-scroll {
  white-space: nowrap;
  padding-bottom: 10rpx;
}

.encyclopedia-item {
  display: inline-flex;
  width: 280rpx;
  margin-right: 20rpx;
  background: #f9f9f9;
  border-radius: 16rpx;
  overflow: hidden;
}

.encyclopedia-image {
  width: 100rpx;
  height: 100rpx;
  object-fit: cover;
}

.encyclopedia-content {
  flex: 1;
  padding: 15rpx;
  display: flex;
  flex-direction: column;
}

.encyclopedia-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.encyclopedia-subtitle {
  font-size: 22rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.encyclopedia-meta {
  display: flex;
  align-items: center;
  font-size: 20rpx;
  color: #999;
  margin-top: auto;
}

/* 新品推荐模块 */
.new-products-section {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
}

.group_6 {
  margin-bottom: 20rpx;
}

.swiper {
  width: 100%;
  height: 450rpx;
}

.item-container {
  width: 100%;
  padding: 20rpx;
}

.image_133 {
  width: 100%;
  height: 200rpx;
  object-fit: cover;
  border-radius: 16rpx;
}

.font_11 {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.font_12 {
  font-size: 24rpx;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.font_13 {
  font-size: 22rpx;
  color: #999;
}

.item-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 10rpx;
}

.action-btn {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 50%;
}

/* 搜索模态框 */
.search-modal {
  background: #ffffff;
  padding: 20rpx;
  height: 100vh;
}

.search-header {
  padding: 15rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.search-input-container {
  display: flex;
  align-items: center;
}

.search-input {
  flex: 1;
  height: 60rpx;
  background: #f5f5f5;
  border-radius: 30rpx;
  padding: 0 20rpx;
  margin: 0 10rpx;
  font-size: 26rpx;
}

.cancel-btn {
  width: 80rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #44cdbd;
  font-size: 28rpx;
}

.search-content {
  padding: 20rpx 0;
}

.search-section {
  margin-bottom: 30rpx;
}

.search-section-title {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 15rpx;
  display: block;
}

.search-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.clear-history {
  font-size: 24rpx;
  color: #44cdbd;
}

.hot-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.keyword-tag {
  background: #f5f5f5;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  font-size: 26rpx;
  color: #333;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 15rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.history-text {
  margin-left: 10rpx;
  font-size: 26rpx;
  color: #333;
}

.search-results {
  padding: 20rpx 0;
}

.result-item {
  display: flex;
  gap: 15rpx;
  padding: 15rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.result-image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  object-fit: cover;
}

.result-content {
  flex: 1;
}

.result-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 5rpx;
  display: block;
}

.result-desc {
  font-size: 24rpx;
  color: #666;
}

/* 云朵摇摆动画 */
@keyframes swing {
  0% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(20deg);
  }
}

/* 数字翻转动画 */
@keyframes flipUp {
  0% { transform: translateY(0); }
  50% { transform: translateY(-50%) scale(0.8); }
  100% { transform: translateY(-100%); }
}
</style>